<!--
    首页界面
-->
<template>
  <div class="layout">
    <TopNav class="nav" toggleMenuVisible/>
    <!--   主体内容部分     -->
    <div class="content">
      <aside v-if="menuVisible">
        <div class="nav-item-title">开发指南</div>
        <ol>
          <li><router-link to="/doc/intro">介绍</router-link></li>
          <li><router-link to="/doc/install">安装</router-link></li>
          <li><router-link to="/doc/getStarted">快速上手</router-link></li>
        </ol>
        <div class="nav-item-title">组件列表</div>
        <ol>
          <li><router-link to="/doc/button">Button 按钮</router-link></li>
          <li><router-link to="/doc/switch">Switch 开关</router-link></li>
          <li><router-link to="/doc/dialog">Dialog 弹窗</router-link></li>
          <li><router-link to="/doc/tabs">Tabs 标签页</router-link></li>
          <li><router-link to="/doc/icon">Icon 图标</router-link></li>
          <li><router-link to="/doc/dropdown">Dropdown下拉菜单</router-link></li>
        </ol>
      </aside>
      <main>
        <router-view />
      </main>
    </div>
  </div>
</template>
<script lang="ts">
import TopNav from "../components/TopNav.vue";
import { inject, Ref } from 'vue'
export default {
  name: "Doc",
  components: {TopNav},
  setup(){
    const menuVisible = inject<Ref<boolean>>('menuVisible') // get到 menuVisible
    console.log(menuVisible.value,'doc获取的值')
    return { menuVisible }
  }
}
</script>
<style lang="scss" scoped>
  .router-link-active{
    text-decoration: underline;
  }
  .layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    > .nav {
      flex-shrink: 0;
    }
    > .content {
      flex-grow: 1;
      padding-top: 60px;
      padding-left: 200px;
      padding-right: 10%;
    /*  @media (max-width: 900px and min-width: 501px) {
        padding-left: 0;
        padding-right: 0px;
      }*/
      @media (max-width: 500px) {
        padding-left: 0;
        padding-right: 0px;
      }
    }
  }
  .content {
    display: flex;
    > aside {
      flex-shrink: 0;
    }
    > main {
      flex-grow: 1;
      padding: 16px;
      z-index: 1;
      position: static;
    }
  }
  // 侧边栏样式
  aside {
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 70px;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    // 标题样式
    >.nav-item-title {
      font-size: 16px;
      color: #333;
      font-weight: bold;
      padding: 15px 10px 5px;
    }
    > ol {
      > li {
        > a{
          display: block;
          padding: 4px 10px;
          font-size: 14px;
          &.router-link-active, &:hover{
            text-decoration: none;
            color: #67C23A;
          }
        }
      }
    }

    @media(max-width:500px){
      z-index: 2;
      background-color: #f9f9f9;
      transition: .4s cubic-bezier(.4,0,0,1);
      box-shadow: 0 0 10px rgba(0,0,0,.2);
      padding-left: 10px;
    }
  }
  main {
    overflow: auto;
  }
</style>
